<template>
  <div>
    <section class="main-container">
      <el-table
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        class="el-table"
        style="width: 100%">
        <el-table-column
          label="Date"
          prop="date">
        </el-table-column>
        <el-table-column
          label="Name"
          prop="name">
        </el-table-column>
        <el-table-column align="right">
          <template #header>
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
          <template #default="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
  <div class="test-slider">
    <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费">
    </el-switch>
  </div>
  <div class="test-steps">
    <el-steps :space="340" :active="1"  :align-center="true" :center="true">
    <el-step title="我的购物车">
      <template v-slot:icon class="step01">
        <i class="step01"></i>
      </template>
    </el-step>
      <el-step title="核对订单信息">
        <template #icon class="step02">
          <i class="step02"></i>
        </template>
      </el-step>
      <el-step title="成功提交订单">
        <template #icon>
          <i class="step03"></i>
        </template>
      </el-step>
      <el-step title="待发货">
        <template>
          <i class="step04"></i>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent ({
  setup: () => {
    let value1 = ref(true)
    let tableData = reactive([{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }])
    
    return { tableData, value1 }
  }
})
</script>

<style lang = "less">
.main-container {
  padding-left: 270px;
  padding-top: 20px;
  padding-right: 50px;
}

.el-table {
  box-shadow: 0px 5px 10px #8b9192;

}

.test-slider {
  position: relative;
  .el-switch__label {
    display: none;
  }
  .el-switch__core {
    width: 90px !important;
  }
  .el-switch__label--left {
    position: absolute;
    left: 23px;
    color: rgb(44, 42, 42);
    z-index: 1;
  }
  .el-switch__label--right {
    position: absolute;
    left: 2px;
    color: #fff;
  }
  .el-switch__label.is-active {
    display: block;
}
}

.test-steps {
  .step01,.step02,.step03,.step04{
    width:24px;
    height:24px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url("../../assets/images/4.png");
    background-size: 100% 100%;
  }
  .step02 {
    background-image: url("../../assets/images/icon.png");
  }
  .step03 {
    background-image: url("../../assets/images/3.png");
  }
  .step04 {
    background-image: url("../../assets/images/3.png");
  }
  .shopCard_step .el-step__head.is-text {
    border-style: hidden;
    background-color:transparent !important;
  }
  .shopCard_step .el-step__head.is-text.is-finish .step02 {
    background-image: url("../../assets/images/icon2.png");
  }
  .shopCard_step .el-step__head.is-text.is-finish .step03 {
    background-image: url("../../assets/images/icon2.png");
  }
  .shopCard_step .el-step__head.is-text.is-finish .step04 {
    background-image: url("../../assets/images/icon2.png");
  }

  .el-step__icon {
    border: none;
    .el-step__icon-inner {
      display: none;
    }
  }
}
</style>
